<template>
  <el-container>
    <!-- 房源行 -->
    <el-row class="outer-row house">
      <el-card
        shadow="always"
        :body-style="{ padding: '30px' }"
      >
        <!-- 房源图片列 -->
        <el-col :span="10">
          <el-image
            class="house-img"
            :src="house.img"
            fit="contain"
          ></el-image>
        </el-col>
        <!-- 房源信息列 -->
        <el-col
          :span="14"
          style="padding-left:40px;"
        >
          <!-- 文字信息+操作行 -->
          <el-row class="text_btn_row">
            <!-- 文字信息列 -->
            <el-col :span="19">
              <!-- 标题 -->
              <el-row class="title-row">
                <span class="house-title">{{ house.title }}</span>
              </el-row>
              <!-- 描述 -->
              <el-row class="advan-row">
                <span class="label-row">
                  房源优势
                </span>
                <span class="advantage">{{ house.advantage }}</span>
              </el-row>
              <!-- 地址 -->
              <el-row class="address-row">
                <span class="label-row">
                  所在位置
                </span>
                <span class="address">{{ house.address }}</span>
              </el-row>
            </el-col>
            <!-- 操作列 -->
            <el-col
              :span="5"
              class="btn-col"
            >
              <div v-if="this.isStarred == '1'">
                <el-button
                  class="btn"
                  type="warning"
                  icon="el-icon-star-on"
                  @click="undoStar"
                >
                  已收藏
                </el-button>
              </div>
              <div v-else>
                <el-button
                  class="btn"
                  type="warning"
                  icon="el-icon-star-off"
                  plain
                  @click="doStar"
                >
                  收藏
                </el-button>
              </div>
              <div v-if="this.isRend == '1'">
                <el-button
                  class="btn"
                  type="primary"
                  icon="el-icon-message-solid"
                >
                  已租赁
                </el-button>
              </div>
              <div v-else>
                <el-button
                  class="btn"
                  type="primary"
                  icon="el-icon-bell"
                  plain
                >
                  租赁
                </el-button>
              </div>
            </el-col>

          </el-row>
          <!-- 数字信息行 -->
          <el-row class="number-row">
            <!-- 类型 -->
            <el-col
              :span="8"
              class="type-col"
            >
              <p class="label-col">类型</p>
              <span class="type-id">
                <div v-if="house.typeId == '0'">
                  <el-tag type="success">新房</el-tag>
                </div>
                <div v-if="house.typeId == '1'">
                  <el-tag type="warning">二手房</el-tag>
                </div>
                <div v-if="house.typeId == '2'">
                  <el-tag type="primary">商业租房</el-tag>
                </div>
                <div v-if="house.typeId == '100'">
                  <el-tag type="info">其他</el-tag>
                </div>
              </span>
            </el-col>
            <!-- 面积 -->
            <el-col
              :span="8"
              class="area-col"
            >
              <p class="label-col">面积</p>
              <span class="area">{{ house.area }} ㎡</span>
            </el-col>
            <!-- 房租 -->
            <el-col
              :span="8"
              class="price-col"
            >
              <p class="label-col">价格</p>
              <span class="price">{{ house.price }} ￥/月</span>
            </el-col>
          </el-row>
        </el-col>
      </el-card>

    </el-row>
    <!-- 评论 -->
    <el-row>

    </el-row>
    <el-footer>Copyright © 2020-present HorsenLiu</el-footer>
  </el-container>
</template>

<script>
import { mapGetters } from 'vuex';
import house from '@/api/house';
import star from '@/api/star';

export default {
  data() {
    return {
      house: {},
      houseId: '',
      loggedUser: {
        name: '',
        userId: ''
      },
      isStarred: '',
      isRend: ''
    };
  },
  computed: {
    ...mapGetters(['name', 'userId'])
  },
  // 监听
  watch: {
    // 当路由发生变化, 方法执行
    $route(to, from) {
      this.init();
    }
  },
  created() {
    this.loggedUser.name = this.$store.state.user.name;
    this.loggedUser.userId = this.$store.state.user.userId;
    this.init();
  },
  inject: ['reload'],
  methods: {
    init() {
      // params表示路由中的参数, 指 path: 'edit/:id' 中类似:id的参数
      // 注意是route不是router
      if (this.$route.params && this.$route.params.id) {
        this.houseId = this.$route.params.id;
        this.getStarred(this.houseId, this.loggedUser.userId);
        this.fetchDataById(this.houseId);
      }
    },
    // 通过id获取项目
    fetchDataById(id) {
      house
        .getHouseById(id)
        .then(response => {
          this.house = response.data.house;
        })
        .catch(response => {
          this.$message({
            type: 'error',
            message: '获取数据失败'
          });
        });
    },
    // 获得是否收藏
    getStarred(houseId, userId) {
      star.getStarById(houseId, userId).then(response => {
        this.isStarred = response.data.isStarred;
      });
    },
    // 收藏
    doStar() {
      console.log('doStar');
      star
        .saveStar(this.houseId, this.loggedUser.userId)
        .then(response => {
          console.log("收藏成功");
          this.reload();
        })
        .catch(response => {
          this.$message({
            type: 'error',
            message: '收藏失败'
          });
        });
    },
    //取消收藏
    undoStar() {
      console.log('undoStar');
      star
        .removeStarById(this.houseId, this.loggedUser.userId)
        .then(response => {
          console.log("取消收藏成功");
          this.reload();
        })
        .catch(response => {
          this.$message({
            type: 'error',
            message: '取消收藏失败'
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
$dark_gray: #99a9bf;
$light_gray: #d3dce6;
$title: #304156;
$house_title: #826158;
$house_price: #ffc041;

.el-footer {
  color: $dark_gray;
  text-align: center;
  line-height: 60px;
}
.el-container {
  padding: 10px 40px 30px 40px;
}
/* 房源row */
.house {
  margin: 30px 40px auto 40px;
  .text_btn_row {
    height: 160px;
  }
  .label-row {
    font-size: 16px;
    text-align: 30px;
    color: $dark_gray;
    margin-right: 10px;
  }
  .label-col {
    font-size: 16px;
    color: $dark_gray;
    margin-top: 0;
  }
  .title-row {
    height: 30px;
    margin-bottom: 25px;
    margin-top: 10px;
  }
  .house-title {
    line-height: 30px;
    font-size: 26px;
    font-weight: 700;
    color: $title;
  }
  .advan-row {
    height: 30px;
    margin-bottom: 20px;
  }
  .advantage {
    line-height: 30px;
    font-size: 18px;
    color: $title;
  }
  .address-row {
    height: 30px;
    margin-bottom: 10px;
  }
  .address {
    line-height: 30px;
    font-size: 18px;
    font-weight: 700;
    color: $house_title;
  }
  .number-row {
    height: 100px;
    padding-top: 10px;
    margin-bottom: 25px;
    padding-top: 15px;
  }
  .el-button + .el-button {
    margin-left: 0;
  }
  .btn-col {
    text-align: center;
    padding-top: 10px;
  }
  .btn {
    margin-bottom: 15px;
  }
  .type-col {
    text-align: center;
  }
  .el-tag {
    height: 38px;
    padding: 9px 20px;
    font-size: 16px;
    line-height: 18px;
  }
  .area-col {
    text-align: center;
  }
  .area {
    line-height: 40px;
    font-size: 24px;
    font-weight: 700;
    color: $dark_gray;
  }
  .price-col {
    text-align: center;
  }
  .price {
    line-height: 40px;
    font-size: 26px;
    font-weight: 700;
    color: $house_price;
  }
  .house-img {
    background-color: $light_gray;
    width: 100%;
    height: 100%;
  }
}
</style>